<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane :label="item" :name="index" v-for="(item, index) in tags"> </el-tab-pane>
  </el-tabs>
  <div class="table_box">
    <div class="table-inner">
      <el-table
        class="table"
        :stripe="true"
        v-loading="loading"
        row-key="id"
        :data="list"
        style="width: 100%"
        border
      >
        <template #empty><el-empty description="暂无数据" /></template>
        <el-table-column prop="equipment" width="120" label="设备编号" align="center">
          <template #default="scope">
            {{ scope.row.equipment.sn }}
          </template>
        </el-table-column>
        <el-table-column
          prop="department"
          show-overflow-tooltip="true"
          min-width="150"
          label="所属科室"
          align="left"
        >
          <template #default="scope">
            {{ scope.row.department.name }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="department"
          show-overflow-tooltip="true"
          min-width="150"
          v-if="!activeName"
          label="紧急联系"
          align="left"
        >
          <template #default="scope">
            {{ scope.row.department.contact }} :
            {{ scope.row.department.mobile }}
          </template>
        </el-table-column> -->
        <el-table-column
          prop="department"
          show-overflow-tooltip="true"
          min-width="150"
     
          label="时间"
          align="left"
        >
          <template #default="scope">
            {{ scope.row.create_time }}
          </template>
        </el-table-column>




        <el-table-column
          prop="room"
          show-overflow-tooltip="true"
          min-width="150"
          label="所属房间"
          align="left"
        />
        <el-table-column prop="type" label="操作类型" align="center" width="100" v-if="activeName">
          <template #default="scope">
            <span v-if="scope.row.type == 0">房间绑定</span>
            <span v-if="scope.row.type == 1">开启</span>
            <span v-if="scope.row.type == 2">关闭</span>
            <span v-if="scope.row.type == 3">查询</span>
            <span v-if="scope.row.type == 4">解绑</span>
            <span v-if="scope.row.type == 5">人员绑定</span>
            <span v-if="scope.row.type == 9">上线</span>
            <span v-if="scope.row.type == 10">离线</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="操作类型"
          align="center"
          min-width="150"
          show-overflow-tooltip="true"
          v-else
        >
          <template #default="scope">
            <span>{{ scope.row.actioninfo }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="pagination">
    <el-pagination
      v-model:currentPage="query.page"
      :page-size="query.limit"
      :total="total"
      small
      background
      layout="prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  import { onMounted, reactive, ref } from 'vue'
  import { InfoLog } from '@/api/admin'
  import { useRouter, useRoute } from 'vue-router'
  const route = useRoute()
  const router = useRouter()
  const loading = ref(true)
  const list = ref()
  const activeName = ref(0)
  const total = ref(0)
  const tags = ['异常日志', '运行日志']
  const query = reactive({
    filter: { errtype: 1 },
    page: 1,
    limit: 10,
  })
  const getList = () => {
    if (route.query.id) {
      query.filter = JSON.stringify({ info_id: route.query.id })
    }
    loading.value = true
    InfoLog(query).then((res) => {
      if (res.code == 200) {
        list.value = res.data.data
        total.value = res.data.count
      }
      loading.value = false
    })
  }
  const handleClick = (tab, event) => {
    // activeName = tab.index;
    // console.log(tab.index);
    query.filter = tab.index == 1 ? { errtype: 0 } : { errtype: 1 }
    console.log(query.filter)
    handleCurrentChange(1)
    // console.log(tab.index, event);
  }
  const handleSizeChange = (val: number) => {
    query.page = 1
    query.limit = val
    getList()
  }
  const handleCurrentChange = (val: number) => {
    query.page = val
    getList()
  }
  getList()
</script>

<style scoped lang="scss">
  .table_box {
    box-sizing: border-box;
    padding: 0 15px 15px;
  }

  .pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-top: 15px;
    box-sizing: border-box;
    flex-shrink: 0;
  }
</style>
